<template>
  <div class="container">
    <div class="main">
      <div class="choose-con">
        <div class="choose-item">
          <!-- ---{{ props.isSelectAll }}--- -->
          <div class="choose-item-1" v-for="(item1, index1) in props.options" :key="index1">
            <el-checkbox v-model="props.isSelectAll[index1].isCheck" :value="item1.roleId" :label="item1.name"
              size="small" class="one" @change="val => handleChange(val, 0, index1)" />
            <el-icon v-if="item1.menuList.length > 0" style="margin-left: 8px;" @click="controlFold(0, index1)">
              <ArrowDownBold />
            </el-icon>
            <!-- 一级 -->

            <div class="choose-item-2" v-for="(item2, index2) in item1.menuList" :key="index2"
              v-show="props.isOpenItem[index1].isShow">
              <!-- --{{ param.isOpenItem[index1].level }}-- -->
              <el-checkbox v-model="props.isSelectAll[index1].children[index2].isCheck" :value="item2.menuId"
                :label="item2.name" size="small" class="two"
                @change="val => handleChange(val, 1, index1, index2)" /><!-- 二级 -->
              <el-icon v-if="item2.children.length > 0" style="margin-left: 8px;"
                @click="controlFold(1, index1, index2)">
                <ArrowDownBold />
              </el-icon>
              <div class=" third" v-show="props.isOpenItem[index1].children[index2].isShow">
                <div class="choose-item-3" v-for="(item3, index3) in item2.children" :key="index3">
                  <el-checkbox v-model="props.isSelectAll[index1].children[index2].children[index3].isCheck"
                    :value="item3.menuId" :label="item3.name" size="small"
                    @change="val => handleChange(val, 2, index1, index2, index3)" /><!-- 三级 -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';

const emit = defineEmits(['sendData', 'sendDataEdit']);

const checkedStr = ref([])

const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  config: {
    type: Object,
    default: () => { },
  },
  isOpenItem: [],//控制每级面板的打开与折叠
  isSelectAll: [],//控制每级面板的选中状态
  rolePermissionList: []
})

//收起下拉
// leval（菜单级别）: 0 一级  leval: 1 二级  leval: 2 三级;

//num: 菜单下标
const controlFold = (leval: number, num1: number, num2: number) => {
  if (leval == 0) {
    props.isOpenItem[num1].isShow = !props.isOpenItem[num1].isShow
    // console.log(props.isOpenItem[num1].isShow, !props.isOpenItem[num1].isShow)
    // console.log(props.isOpenItem)
  } else if (leval == 1) {
    const upLevel = props.isOpenItem[num1]
    upLevel.children[num2].isShow = !upLevel.children[num2].isShow
  }

}
//选中 value change事件自动传递的选中状态
// leval（菜单级别）: 0 一级  leval: 1 二级  leval: 2 三级;
// num1: 菜单下标
// num2：菜单下标
const handleChange = (value, leval: number, num1: number, num2: number, num3: number) => {
  if (leval == 0) {
    if (value) {
      props.isSelectAll[num1].children.map((item, index) => {
        props.isSelectAll[num1].children[index].isCheck = true
        props.isSelectAll[num1].children[index].children.map((item2, index2) => {
          props.isSelectAll[num1].children[index].children[index2].isCheck = true
        })
      })

    } else {
      props.isSelectAll[num1].children.map((item, index) => {
        props.isSelectAll[num1].children[index].isCheck = false
        props.isSelectAll[num1].children[index].children.map((item2, index2) => {
          props.isSelectAll[num1].children[index].children[index2].isCheck = false
        })
      })
    }
  } else if (leval == 1) {
    if (value) {
      props.isSelectAll[num1].children[num2].children.map((item, index) => {
        props.isSelectAll[num1].children[num2].children[index].isCheck = true
      })
    } else {
      props.isSelectAll[num1].children[num2].children.map((item, index) => {
        props.isSelectAll[num1].children[num2].children[index].isCheck = false
      })
    }
    props.isSelectAll[num1].children.map((val, index) => {
      if (val.isCheck) {
        props.isSelectAll[num1].isCheck = true
      }
    })

  } else if (leval == 2) {
    if (value) {
      props.isSelectAll[num1].children[num2].children[num3].isCheck = true
    } else {
      props.isSelectAll[num1].children[num2].children[num3].isCheck = false
    }
    props.isSelectAll[num1].children[num2].children.map((val, index) => {
      if (val.isCheck) {
        props.isSelectAll[num1].children[num2].isCheck = true
        props.isSelectAll[num1].isCheck = true
      }
    })
  }

  // 获取所有选中checkbox的值
  checkedStr.value = []
  props.isSelectAll.map((item) => {
    if (item.isCheck) {
      // checkedStr.value.push(item.itemId)
      item.children.map((item2) => {
        if (item2.isCheck) {
          checkedStr.value.push(item2.itemId)
          item2.children.map((item3) => {
            if (item3.isCheck) {
              checkedStr.value.push(item3.itemId)
            }
          })
        }
      })
    }
  })
  // console.log('checkedStr:', checkedStr.value)
  emit('sendData', checkedStr.value);

  emit('sendDataEdit', checkedStr.value);
}
onMounted(() => {
  // initData()
})
//编辑权限时 预先选择已有权限
// const initData = () => {
//   const permissionArr = []
//   props.rolePermissionList.map((item, index) => { permissionArr.push(item.menuId) })
//   console.log('permissionArr:', permissionArr)
// }
</script>

<style lang="scss" scoped>
.choose-item-2,
.choose-item-3 {
  padding-left: 20px;
}
</style>